<script setup lang="ts">
import TodoList from '@jm_405/to_do_list'
import { ref } from 'vue'
import MinValue from '@components/MinValue.vue'
import MinValueTS from '@components/MinValueTS.vue'
import ElTextWrapper from '@components/ElTextWrapper.vue'
import 'element-plus/dist/index.css'

// 使用 ref 引用组件实例
const todoList = ref<InstanceType<typeof TodoList>>()
const minValue = ref<InstanceType<typeof MinValue>>()
const minValueTS = ref<InstanceType<typeof MinValueTS>>()
const elTextWrapper = ref<InstanceType<typeof ElTextWrapper>>()
const globalComponent = ref(null)

// 为MinValue和MinValueTS组件准备的数据
const minValueModel = ref([])
const minValueTSModel = ref(15)

// 全局组件的状态
const isCollapsed = ref(false)

// 测试TodoList组件
const testTodoList = () => {
  // 添加一个待办事项
  todoList.value?.addTodo?.()
  
  // 获取待办事项列表和统计信息
  console.log('当前待办事项列表：', todoList.value?.todos)
  console.log('过滤后的待办事项：', todoList.value?.filteredTodos)
  console.log('未完成项数量：', todoList.value?.activeCount)
  console.log('是否有已完成项：', todoList.value?.hasCompleted)
}

// 测试MinValue组件
const testMinValue = () => {
  console.log('MinValue最小值:', minValue.value?.getValue())
  console.log('MinValue数组内容:', minValueModel.value)
}

// 测试MinValueTS组件
const testMinValueTS = () => {
  console.log('MinValueTS当前值:', minValueTS.value?.getValue())
  console.log('MinValueTS v-model绑定值:', minValueTSModel.value)
}

// 测试ElTextWrapper组件
const testElTextWrapper = () => {
  console.log('ElTextWrapper类型:', elTextWrapper.value?.getTextType())
}

// 测试GlobalComponent组件
const testGlobalComponent = () => {
  console.log('GlobalComponent折叠状态:', isCollapsed.value)
  isCollapsed.value = !isCollapsed.value
  console.log('组件内部的展开状态:', globalComponent.value);
}

</script>

<template>
  <div class="test-container">
    <h2>组件测试</h2>
    
    <div class="component-section">
      <h3>TodoList组件</h3>
      <TodoList ref="todoList" />
      <button @click="testTodoList">测试TodoList</button>
    </div>

    <div class="component-section">
      <h3>MinValue组件测试</h3>
      <MinValue ref="minValue" :min="0" v-model="minValueModel" />
      <button @click="testMinValue">测试MinValue</button>
    </div>
    
    <div class="component-section">
      <h3>MinValueTS组件测试</h3>
      <MinValueTS ref="minValueTS" :min="5" v-model="minValueTSModel" />
      <button @click="testMinValueTS">测试MinValueTS</button>
    </div>
    
    <div class="component-section">
      <h3>ElTextWrapper组件测试</h3>
      <ElTextWrapper ref="elTextWrapper" type="primary" size="large">
        这是ElTextWrapper组件的内容
      </ElTextWrapper>
      <button @click="testElTextWrapper">测试ElTextWrapper</button>
    </div>
    
    <div class="component-section">
      <h3>GlobalComponent组件测试（全局注册）</h3>
      <GlobalComponent 
        ref="globalComponent"
        title="全局组件示例" 
        theme="primary"
        :border="true"
        :default-collapsed="isCollapsed"
        @collapse-change="isCollapsed = $event"
      >
        <template #header>
          <div style="display: flex; align-items: center;">
            <span style="margin-right: 10px;">🌟</span>
            <span>自定义标题区域</span>
          </div>
        </template>
        <div>
          <p>这是GlobalComponent的内容区域，可以通过点击标题栏折叠/展开。</p>
          <p>当前主题: primary</p>
          <p>其他可用主题: success, warning, danger, info</p>
        </div>
      </GlobalComponent>
      <button @click="testGlobalComponent">测试GlobalComponent</button>
    </div>
    
    <div class="component-section">
      <h3>GlobalComponent主题展示</h3>
      <GlobalComponent theme="success" title="Success主题">
        这是success主题的内容
      </GlobalComponent>
      
      <GlobalComponent theme="warning" title="Warning主题">
        这是warning主题的内容
      </GlobalComponent>
      
      <GlobalComponent theme="danger" title="Danger主题">
        这是danger主题的内容
      </GlobalComponent>
      
      <GlobalComponent theme="info" title="Info主题" :border="false">
        这是info主题的内容（无边框）
      </GlobalComponent>
    </div>
  </div>
</template>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.component-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background-color: #f9f9f9;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

h3 {
  color: #555;
  margin-bottom: 15px;
}
</style>
